<template>
  <Scrollbar class="h-screen overflow-x-hidden bg-black">
    <div class="w-full mx-auto overflow-hidden max-w-7xl">
      <a-typography-title class="text-white" :level="2">页面示例</a-typography-title>
      <div class="grid grid-cols-1 gap-6">
        <a-card title="登录页">
          <div class="flex flex-wrap gap-4">
            <LoginView :type="1" />
          </div>
        </a-card>
        <a-card title="一键注册">
          <div class="flex flex-wrap gap-4">
            <RegisterView :type="1" />
          </div>
        </a-card>
        <a-card title="找回密码">
          <div class="flex flex-wrap gap-4">
            <RetrievePassword :type="3" />
          </div>
        </a-card>
        <a-card title="首页">
          <div class="flex flex-wrap gap-4">
            <HomeView :type="4" />
          </div>
        </a-card>
        <a-card title="视频更多列表">
          <div class="flex flex-wrap gap-4">
            <MoreVideos :type="1" />
          </div>
        </a-card>
        <a-card title="播放页">
          <div class="flex flex-wrap gap-4">
            <PlayerView :type="4" />
          </div>
        </a-card>
        <a-card title="筛选样式">
          <div class="flex flex-wrap gap-4">
            <VideoFilter />
          </div>
        </a-card>
        <a-card title="搜索">
          <div class="flex flex-wrap gap-4">
            <SearchView :type="1" />
          </div>
        </a-card>
        <a-card title="简介">
          <div class="flex flex-wrap gap-4">
            <ActorIntroduction :type="1" />
          </div>
        </a-card>
        <a-card title="影片评分">
          <div class="flex flex-wrap gap-4">
            <PlayNumber />
          </div>
        </a-card>
        <a-card title="会员">
          <div class="flex flex-wrap gap-4">
            <MemberView :type="3" />
          </div>
        </a-card>
        <a-card title="我的">
          <div class="flex flex-wrap gap-4">
            <MineView />
          </div>
        </a-card>
        <a-card title="金币充值">
          <div class="flex flex-wrap gap-4">
            <GoldCoinRecharge />
          </div>
        </a-card>
        <a-card title="开通会员">
          <div class="flex flex-wrap gap-4">
            <OpenMember />
          </div>
        </a-card>
        <a-card title="个人资料">
          <div class="flex flex-wrap gap-4">
            <PersonalView :type="4" />
          </div>
        </a-card>
        <a-card title="邮箱">
          <div class="flex flex-wrap gap-4">
            <MailView :type="1" />
          </div>
        </a-card>
        <a-card title="观看历史">
          <div class="flex flex-wrap gap-4">
            <WatchHistory :type="3" />
          </div>
        </a-card>
        <a-card title="我的购买">
          <div class="flex flex-wrap gap-4">
            <MyPurchases />
          </div>
        </a-card>
        <a-card title="我的收藏">
          <div class="flex flex-wrap gap-4">
            <MyCollect :type="5" />
          </div>
        </a-card>
        <a-card title="消费明细">
          <div class="flex flex-wrap gap-4">
            <ConsumerDetails />
          </div>
        </a-card>
        <a-card title="邀请好友">
          <div class="flex flex-wrap gap-4">
            <InviteFriends />
          </div>
        </a-card>
        <a-card title="联系客服">
          <div class="flex flex-wrap gap-4">
            <ContactService />
          </div>
        </a-card>
        <a-card title="系统设置">
          <div class="flex flex-wrap gap-4">
            <SystemSettings />
          </div>
        </a-card>
        <a-card title="修改密码">
          <div class="flex flex-wrap gap-4">
            <ChangePassword />
          </div>
        </a-card>
        <a-card title="小说">
          <div class="flex flex-wrap gap-4">
            <NovelView />
          </div>
        </a-card>
        <a-card title="小说列表">
          <div class="flex flex-wrap gap-4">
            <NovelList :type="1" />
          </div>
        </a-card>
        <a-card title="小说详情">
          <div class="flex flex-wrap gap-4">
            <NovelDetails :type="2" />
          </div>
        </a-card>
        <a-card title="阅读小说">
          <div class="flex flex-wrap gap-4">
            <ReadNovel :type="1" />
          </div>
        </a-card>
        <a-card title="小说目录">
          <div class="flex flex-wrap gap-4">
            <FictionCatalog :type="1" />
          </div>
        </a-card>
        <a-card title="图集">
          <div class="flex flex-wrap gap-4">
            <AtlasView />
          </div>
        </a-card>
        <a-card title="图集列表">
          <div class="flex flex-wrap gap-4">
            <AtlasList :type="1" />
          </div>
        </a-card>
        <a-card title="图集详情">
          <div class="flex flex-wrap gap-4">
            <AtlasDetail :type="2" />
          </div>
        </a-card>
        <a-card title="游戏">
          <div class="flex flex-wrap gap-4">
            <GameView />
          </div>
        </a-card>
        <a-card title="弹出广告">
          <div class="flex flex-wrap gap-4">
            <PopupAdView />
          </div>
        </a-card>
        <a-card title="底部浮动广告">
          <div class="flex flex-wrap gap-4">
            <FloatingAd />
          </div>
        </a-card>
      </div>
    </div>
  </Scrollbar>
</template>

<script setup lang="ts">
import Scrollbar from '@cms/scrollbar'
import PopupAdView from '@/components/cms/views/src/components/advertise/PopupAd.vue'
import FloatingAd from '@/components/cms/views/src/components/advertise/FloatingAd.vue'
</script>

<style lang="less" scoped>
@import url('ant-design-vue/dist/antd.less');

::v-deep(.ant-card) {
  .ant-card-head {
    @apply border-none bg-transparent text-white;
  }

  @apply bg-[#303030] border border-solid border-[#303030];

  .ant-card-body {
    @apply bg-black border-none;

    .ant-card-body {
      @apply px-0 border-none;
    }

    p {
      @apply m-0;
    }

    .ant-card,
    .ant-card-head {
      @apply border-none bg-transparent text-white;
    }
  }
}
</style>
